import React, { useState, useEffect } from 'react'
import Markdown from '@/components/Markdown'
import { coy, base16AteliersulphurpoolLight, coldarkCold, dracula , duotoneLight, tomorrow, prism} from 'react-syntax-highlighter/dist/esm/styles/prism'
import { github, monoBlue, routeros, stackoverflowLight } from 'react-syntax-highlighter/dist/esm/styles/hljs'

export default function MarkdownView({ url, components={} }) {
    const [md, setMd] = useState("加载中")
    useEffect(() => {
        fetch(url).then(r => r.text()).then(r => setMd(r))
    }, [])

    return (
        <Markdown md={md} codeConfig={{ style: prism }} components={{ 
            ...components
        }}></Markdown>
    )
}
